var websocket = null;
//判断当前浏览器是否支持WebSocket
if ('WebSocket' in window) {
  websocket = new WebSocket("ws://106.13.56.159:8081/websocket");
}
else {
  alert('当前浏览器 Not support websocket')
}

//连接发生错误的回调方法
websocket.onerror = function () {
  alert("WebSocket连接发生错误");
};

//连接成功建立的回调方法
websocket.onopen = function () {
  alert("WebSocket连接成功");
}

//接收到消息的回调方法
websocket.onmessage = function (event) {
  let json = JSON.parse(event.data);
  let result = json.result;
  let time = result.date;
  appendDialog2("talk_recordbox",
      result.remoteAddress.address + ":" + result.remoteAddress.port,
      result.message,
      time);
  $("#content").val("");
  render();
}

//连接关闭的回调方法
websocket.onclose = function () {
  alert("WebSocket连接关闭");
}

//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function () {
  closeWebSocket();
}

//关闭WebSocket连接
function closeWebSocket() {
  websocket.close();
}

/**
 * 页面加载
 */
$(function () {
  render();
  var content = "客官，来啦，坐吧！<br/>回复[查看]收取更多精彩内容。";
  content += "<br/>回复[帮助]可以查看所有可用的指令。";
  // 添加公众号的开场白
  appendDialog("talk_recordbox", "公众号", content);
  render();
});

/**
 * 发送消息
 * @param basePath
 */
function send() {
  var content = $("#content").val();

  if (!content) {
    alert("请输入内容！");
    return;
  }
  websocket.send(content);
  appendDialog("talk_recordboxme", "My账号", content);
  render();
  $("#content").val("");
}

/**
 * 渲染方法，加载滚动条
 */
function render() {
  // the element we want to apply the jScrollPane
  var $el = $('#jp-container').jScrollPane({
        verticalGutter: -16
      }),
      // the extension functions and options
      extensionPlugin = {
        extPluginOpts: {
          // speed for the fadeOut animation
          mouseLeaveFadeSpeed: 500,
          // scrollbar fades out after hovertimeout_t milliseconds
          hovertimeout_t: 1000,
          // if set to false, the scrollbar will be shown on mouseenter and hidden on mouseleave
          // if set to true, the same will happen, but the scrollbar will be also hidden on mouseenter after "hovertimeout_t" ms
          // also, it will be shown when we start to scroll and hidden when stopping
          useTimeout: true,
          // the extension only applies for devices with width > deviceWidth
          deviceWidth: 980
        },
        hovertimeout: null, // timeout to hide the scrollbar
        isScrollbarHover: false,// true if the mouse is over the scrollbar
        elementtimeout: null,	// avoids showing the scrollbar when moving from inside the element to outside, passing over the scrollbar
        isScrolling: false,// true if scrolling
        addHoverFunc: function () {
          // run only if the window has a width bigger than deviceWidth
          if ($(window).width() <= this.extPluginOpts.deviceWidth) {
            return false;
          }
          var instance = this;
          // functions to show / hide the scrollbar
          $.fn.jspmouseenter = $.fn.show;
          $.fn.jspmouseleave = $.fn.fadeOut;
          // hide the jScrollPane vertical bar
          var $vBar = this.getContentPane().siblings('.jspVerticalBar').hide();
          /*
           * mouseenter / mouseleave events on the main element
           * also scrollstart / scrollstop - @James Padolsey : http://james.padolsey.com/javascript/special-scroll-events-for-jquery/
           */
          $el.bind('mouseenter.jsp', function () {

            // show the scrollbar
            $vBar.stop(true, true).jspmouseenter();

            if (!instance.extPluginOpts.useTimeout) {
              return false;
            }

            // hide the scrollbar after hovertimeout_t ms
            clearTimeout(instance.hovertimeout);
            instance.hovertimeout = setTimeout(function () {
              // if scrolling at the moment don't hide it
              if (!instance.isScrolling) {
                $vBar.stop(true, true).jspmouseleave(
                    instance.extPluginOpts.mouseLeaveFadeSpeed || 0);
              }
            }, instance.extPluginOpts.hovertimeout_t);
          }).bind('mouseleave.jsp', function () {
            // hide the scrollbar
            if (!instance.extPluginOpts.useTimeout) {
              $vBar.stop(true, true).jspmouseleave(
                  instance.extPluginOpts.mouseLeaveFadeSpeed || 0);
            } else {
              clearTimeout(instance.elementtimeout);
              if (!instance.isScrolling) {
                $vBar.stop(true, true).jspmouseleave(
                    instance.extPluginOpts.mouseLeaveFadeSpeed || 0);
              }
            }
          });
          if (this.extPluginOpts.useTimeout) {
            $el.bind('scrollstart.jsp', function () {
              // when scrolling show the scrollbar
              clearTimeout(instance.hovertimeout);
              instance.isScrolling = true;
              $vBar.stop(true, true).jspmouseenter();
            }).bind('scrollstop.jsp', function () {
              // when stop scrolling hide the scrollbar (if not hovering it at the moment)
              clearTimeout(instance.hovertimeout);
              instance.isScrolling = false;
              instance.hovertimeout = setTimeout(function () {
                if (!instance.isScrollbarHover) {
                  $vBar.stop(true, true).jspmouseleave(
                      instance.extPluginOpts.mouseLeaveFadeSpeed || 0);
                }
              }, instance.extPluginOpts.hovertimeout_t);
            });
            // wrap the scrollbar
            // we need this to be able to add the mouseenter / mouseleave events to the scrollbar
            var $vBarWrapper = $('<div/>').css({
              position: 'absolute',
              left: $vBar.css('left'),
              top: $vBar.css('top'),
              right: $vBar.css('right'),
              bottom: $vBar.css('bottom'),
              width: $vBar.width(),
              height: $vBar.height()
            }).bind('mouseenter.jsp', function () {
              clearTimeout(instance.hovertimeout);
              clearTimeout(instance.elementtimeout);
              instance.isScrollbarHover = true;
              // show the scrollbar after 100 ms.
              // avoids showing the scrollbar when moving from inside the element to outside, passing over the scrollbar
              instance.elementtimeout = setTimeout(function () {
                $vBar.stop(true, true).jspmouseenter();
              }, 100);
            }).bind('mouseleave.jsp', function () {
              // hide the scrollbar after hovertimeout_t
              clearTimeout(instance.hovertimeout);
              instance.isScrollbarHover = false;
              instance.hovertimeout = setTimeout(function () {
                // if scrolling at the moment don't hide it
                if (!instance.isScrolling) {
                  $vBar.stop(true, true).jspmouseleave(
                      instance.extPluginOpts.mouseLeaveFadeSpeed || 0);
                }
              }, instance.extPluginOpts.hovertimeout_t);
            });
            $vBar.wrap($vBarWrapper);
          }
        }
      },
      // the jScrollPane instance
      jspapi = $el.data('jsp');
  // extend the jScollPane by merging
  $.extend(true, jspapi, extensionPlugin);
  jspapi.addHoverFunc();
}

/**
 * 向聊天记录中添加聊天内容
 * @param myClass 添内容的样式
 * @param name 发送消息的账号名称
 * @param content 发送的内容
 */
function appendDialog(myClass, name, content) {
  var div = "";
  div += "<div class='" + myClass + "'>";
  div += "<div class='user'><img src='"
      + "images/thumbs/" + myClass + ".jpg'/>" + name + "</div>";
  div += "<div class='talk_recordtextbg'>&nbsp;</div>";
  div += "<div class='talk_recordtext'>";
  div += "<h3>" + content + "</h3>";
  div += "<span class='talk_time'>" + getCurrentDate() + "</span>";
  div += "</div>";
  div += "</div>";
  $('#jp-container').children().eq(0).children().eq(0).append(div);
}

function appendDialog2(myClass, name, content, time) {
  var div = "";
  div += "<div class='" + myClass + "'>";
  div += "<div class='user'><img src='"
      + "images/thumbs/" + myClass + ".jpg'/>" + name + "</div>";
  div += "<div class='talk_recordtextbg'>&nbsp;</div>";
  div += "<div class='talk_recordtext'>";
  div += "<h3>" + content + "</h3>";
  div += "<span class='talk_time'>" + time + "</span>";
  div += "</div>";
  div += "</div>";
  $('#jp-container').children().eq(0).children().eq(0).append(div);
}
/**
 * 获取当前系统时间
 * @returns {String} 当前系统时间
 */
function getCurrentDate() {
  var date = new Date();
  return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate()
      + " " + (date.getHours() < 10 ? "0" + date.getHours() : date.getHours())
      + ":" + (date.getMinutes() < 10 ? "0" + date.getMinutes()
          : date.getMinutes());
}